<template>
    <div>
      <CrumBsofbread name1="商品管理" name2="添加商品"/>
      <el-card>
          <el-alert
              title="添加商品信息" center type="info" show-icon :closable="false">
          </el-alert>
          <el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
              <el-step title="基本信息"></el-step>
              <el-step title="商品参数"></el-step>
              <el-step title="商品属性"></el-step>
              <el-step title="商品图片"></el-step>
              <el-step title="商品内容"></el-step>
              <el-step title="完成"></el-step>
          </el-steps>
          <el-form :model="addForm" :rules="addFormRules" ref="ruleForm" label-width="100px" label-position="top">
              <el-tabs v-model="activeIndex" :tab-position="'left'" 
              :before-leave="beforeTabLeave" @tab-click="tabClicked">
                  <el-tab-pane label="基本信息" name="0">
                      <el-form-item label="商品名称" prop="goods_name">
                          <el-input v-model="addForm.goods_name"></el-input>
                      </el-form-item>
                      <el-form-item label="商品价格" prop="goods_price">
                          <el-input v-model="addForm.goods_price" type="number"></el-input>
                      </el-form-item>
                      <el-form-item label="商品重量" prop="goods_weight">
                          <el-input v-model="addForm.goods_weight" type="number"></el-input>
                      </el-form-item>
                      <el-form-item label="商品数量" prop="goods_number">
                          <el-input v-model="addForm.goods_number" type="number"></el-input>
                      </el-form-item>
                      <el-form-item label="商品分类" prop="goods_cat">
                          <el-cascader
                              expand-trigger="hover"          
                              :options="catelist"
                              :props="{ expandTrigger: 'hover', ...cascaderProps}"
                              
                              v-model="addForm.goods_cat"
                              @change="handleChange" 
                              clearable>
                          </el-cascader>
                      </el-form-item>
                  </el-tab-pane>
                  <el-tab-pane label="商品参数" name="1">
                    <!-- 渲染表单的item项 -->
                    <el-form-item :label="item.attr_name" v-for="item in manyTableData" :key="item.attr_id">
                    <el-checkbox-group v-model="item.attr_vals">
                        <el-checkbox border :label="item" v-for="(item, i) in item.attr_vals" :key="i">
                            {{ item }}</el-checkbox >
                    </el-checkbox-group>
                    </el-form-item>
                </el-tab-pane>
                  <el-tab-pane label="商品属性" name="2">
                      <el-form-item :label="item.attr_name" v-for="item in onlyTableData" :key="item.attr_id">
                          <el-input v-model="item.attr_vals"></el-input>
                      </el-form-item>                   
                  </el-tab-pane>
                  <el-tab-pane label="商品图片" name="3">
                      <el-upload
                          class="upload-demo"
                          :action="uploadURL"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          list-type="picture"
                          :headers="headerObj"
                          :on-success="handleSuccess">
                          <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload>                 
                  </el-tab-pane>
                  <el-tab-pane label="商品内容" name="4">
                      <quill-editor v-model="addForm.goods_introduce"></quill-editor>
                      <el-button type="primary" class="btnAdd" @click="add">添加商品</el-button>
                  </el-tab-pane>
              </el-tabs>
              
          </el-form>
      </el-card>
      <!-- 图片预览 -->
      <el-dialog
          title="图片预览"
          :visible.sync="previewVisible"
          width="50%">
          <img :src="previewPath" alt="" class="previewimg">
      </el-dialog>
    </div>
  </template>
  
  <script>
  import CrumBsofbread from '../CrumBsofbread.vue'
  import _ from 'lodash'
  export default {
      components: {
          CrumBsofbread
      },
      data() {
          return {
              activeIndex: '0',
              //添加商品的表单数据对象
              addForm: {
                  goods_name: '',
                  goods_price: 0,
                  goods_weight: 0,
                  goods_number: 0,
                  //商品所属的分类数组
                  goods_cat: [],
                  //商品的详情描述
                  goods_introduce: '',
                  attrs: []
              },
              //规则验证
              addFormRules: {
                  goods_name: [
                      { required: true, message: '请输入商品名称', trigger: 'blur'}
                  ],
                  goods_price: [
                      { required: true, message: '请输入商品价格', trigger: 'blur'}
                  ],
                  goods_weight: [
                      { required: true, message: '请输入商品重量', trigger: 'blur'}
                  ],
                  goods_number: [
                      { required: true, message: '请输入商品数量', trigger: 'blur'}
                  ]
              },
              //商品分类列表
              catelist: [],
              //指定级联选择器的配置对象
              cascaderProps: {
                  value: 'cat_id',
                  label: 'cat_name',
                  children: 'children',
                  
              },
              //动态参数列表数据
              manyTableData: [],
              //静态属性列表数据
              onlyTableData: [],
              //上传图片的url地址
              uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',
              //图片上传组件的headers请求头对象
              headerObj: {
                  Authorization:
                  window.sessionStorage.getItem('token')
              },
              previewPath: '',
              previewVisible: false
          }
      },
      created() {
          this.getCateList()
      },
      methods: {
          //获取所有商品分类列表数据
          async getCateList() {
          const { data: res } = await this.$http.get('categories')
          if (res.meta.status !== 200) {
              return this.$message.error('获取商品分类失败！')
          }
          this.catelist = res.data
          //console.log(this.catelist);
          },
          handleChange() {
              console.log(this.addForm.goods_cat);
          },
          // 离开当前 Tabs 页
          beforeTabLeave(activeName, oldActiveName) {
              if (oldActiveName === '0' && this.addForm.goods_cat.length !== 3 ) {
                  this.$message.error('请先选择商品分类! 或 填写商品名称')
                  return false
              }
          },
          async tabClicked() {
               // 证明访问的是动态列表
            if (this.activeIndex === '1') {
                console.log('动态参数')
                const { data: res } = await this.$http.get(
                `categories/${this.cateId}/attributes`,
                {
                    params: { sel: 'many' }
                }
                )
                if (res.meta.status !== 200) {
                return this.$message.error('获取动态列表失败!')
                }
                res.data.forEach(
                item =>
                    (item.attr_vals =
                    item.attr_vals.length === 0 ? [] : item.attr_vals.split(' '))
                )
                // console.log(res)
                this.manyTableData = res.data
            }
            if (this.activeIndex === '2') {
                const { data: res } = await this.$http.get(
                `categories/${this.cateId}/attributes`,
                {
                    params: { sel: 'only' }
                }
                )
                if (res.meta.status !== 200) {
                return this.$message.error('获取静态列表失败!')
                }
                this.onlyTableData = res.data
                console.log(this.onlyTableData)
            }   
          },
          //处理图片预览效果
          handlePreview(file) {
              this.previewPath = 
              file.response.data.url
              this.previewVisible = true
          },
          //处理移除图片的事件
          handleRemove(file) {
              // 1. 获取将要删除的图片临时路径
              const filePath = file.response.data.tmp_path
              // 2. 从pics数组中 找到这个图片对应的索引值
              const i = this.addForm.pics.findIndex(x => x.pic === filePath)
              // 3. 调用数组的splice方法 把图片信息对象 从 splice 数组中移除
              this.addForm.pics.splice(i, 1)
              console.log(this.addForm);
          },
          //监听图片上传成功的事件
          handleSuccess(response) {
              //console.log(response)
              // 1. 拼接得到一个图片信息对象
              const picInfo = { pic: response.data.tmp_path }
              // 2. 将图片信息对象 push 到 PICS 数组中
              this.addForm.pics.push(picInfo)
              //console.log(this.addForm);
          },
          //添加商品
          add() {
              //执行添加业务逻辑
              console.log(this.addForm);
              this.$refs.ruleForm.validate(async valid => {
                  if (!valid) {
                      return this.$message.error('请填写必要的表单项！')
                  }
                  const form = _.cloneDeep(this.addForm)
                  form.goods_cat = form.goods_cat.join(',')
                  //处理动态参数
                  this.manyTableData.forEach(item => {
                      const newInfo = {
                          attr_id: item.attr_id,
                          attr_value: item.attr_vals.join(' ')
                      }
                      this.addForm.attrs.push(newInfo)
                  })
                  //处理静态属性
                  this.manyTableData.forEach(item => {
                      const newInfo = { attr_id: item.attr_id,
                          attr_value: item.attr_vals }
                      this.addForm.attrs.push(newInfo)
                  })
                  form.attrs = this.addForm.attrs
                  console.log(form);
                  //发起商品请求
                  const { data: res } = await this.$http.post('goods', form) 
                      if (res.meta.status !== 201) {
                          return this.$message.error('添加商品失败！')
                      }
                      this.$message.success('添加商品成功')
                      this.$router.push('/goods')
              })
          }
      },
      computed: {
          cateId() {
          if (this.addForm.goods_cat.length === 3) {
              return this.addForm.goods_cat[2]
          }
          return null
          }
      }
  }
  </script>
  
  <style lang="less" scoped>
  .el-checkbox {
      margin: 0 10px 0 0 !important;
  }
  .previewimg {
      width: 100%;
  }
  .btnAdd {
      margin-top: 15px;
  }
  </style>